React 表单输入值不会更新传递的值 onChange |
您所在的位置：网站首页 › react 表单值更新 › React 表单输入值不会更新传递的值 onChange |
|
我有一个非常基本的反应页面来更新数据结构：列出更新并将其发送到数据库。下面的代码片段的一些上下文：列表只是一个包含 2 个值和一个数组的基本结构。该列表要么是空的，要么如果有列表传递给它，它将使用 props 进行初始化。该列表已正确初始化，我可以在控制台中看到所有数据。 如果列表中有数据，组件中的输入字段将默认为这些值。标题和所有者输入按预期工作，我对它们没有任何问题。我遇到问题的字段是列表项字段。 我必须动态创建列表项字段，因为我在任何给定时间都不知道列表中有多少列表项。列表项的输入数量已正确生成，并且输入中的数据正确。问题是，当我尝试更改列表项的输入值时，我最多只能更新字符串末尾的一个字符。 我可以看到控制台中的值正在更新，但输入中的值不会更改，除非非常奇怪的是，我上去更改标题或所有者中的值。 例如，如果我有一个如下所示的输入： 第 1 项 我尝试将其更新为： 第 1 项包含更多信息 输入只会在字段中追加 1 个字符，最终结果如下： 第 1o 项 最后一个“o”是“info”中的“o” 我希望这是有道理的。 我怀疑这与我无法在不传入整个新 listItems 数组的情况下调用 setListItems 的事实有关。我无法单独更新挂钩的项目，或者至少我不知道如何更新，而且我的所有研究都毫无结果。 const EditList = (props) => { let list = { title: '', owner: '', listItems: [], }; let newListCreation = true; const [listTitle, setListTitle] = useState(''); const [owner, setOwner] = useState(''); const [listItems, setListItems] = useState([]); const navigate = useNavigate(); if (props.list) { list = props.list; newListCreation = false; console.log(list); }; let refresh = false; useEffect(() => { setListTitle(list.title); setOwner(list.owner); setListItems(list.listItems); }, [refresh]); const handleFormSubmit = (event) => { event.preventDefault(); console.log("submit"); const editedList = { id: list.id, title: listTitle, owner: owner, listItems: listItems, }; saveList(editedList); }; const saveList = async (list) => { setListItems(list.listItems); let response; console.log(list); if (newListCreation) response = await dataSource.post('/list', list); else response = await dataSource.put('/list', list); console.log(response); console.log(response.data); props.onEditList(navigate); }; const handleCancel = () => { navigate("/"); }; const updateOwner = (event) => { setOwner(event.target.value); }; const updateTitle = (event) => { setListTitle(event.target.value); }; const updateListItem = (event) => { console.log("list items: ", listItems); console.log("event log id: ", event.target.id); console.log(list.listItems[0].itemText); console.log(event.target.value); for (let i = 0; i < list.listItems.length; i++) { if (parseInt(list.listItems[i].id) === parseInt(event.target.id)) { list.listItems[i].itemText = event.target.value; } } } const renderItemList = list.listItems.map((listItem) => { return ( ); }); return ( {newListCreation ? "Create New" : "Edit"}List List Title Owner List Items {renderItemList} + Add new list item + Cancel Submit ); }; export default EditList;我尝试了上面的方法，还尝试将 renderItemList 指向的结构更改为 useState 中的 listItems。什么都行不通。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |